<template>
  <div id="content">
      <van-skeleton  title avatar :row="3" :loading="props.loading" v-for=" user in props.userList">
        <van-card
                  :desc=user.profile
                  :title="`${user.username} (${user.plantcode})`"
                  :thumb=user.avtarUrl
        >
          <template #tags>
            <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 5px;margin-top: 5px">
              {{ tag }}
            </van-tag>
          </template>

          <template #footer>
            <van-button size="mini">联系我</van-button>
          </template>
        </van-card>

      </van-skeleton>


  </div>

  <van-empty v-if="!userList || userList.length <1" image="search" description="搜索结果为空"/>

</template>

<script setup lang="ts">
// 引入css
import 'vant/es/toast/style';
import 'vant/es/notify/style'
import type {UserType} from "../models/user.d.ts";

interface UserCardListProps {
  loading: boolean;
  userList: UserType[];
}

// 给父组件设置默认值，保证数据不为空
const props = withDefaults(defineProps<UserCardListProps>(), {
  //@ts-ignore
  userList: [] as UserType[],
  loading: true,
});


</script>

<style scoped>

#content {
  padding-bottom: 50px;
}
</style>